<template>
    <div class="person">
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <h2>住址:{{address}}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script  lang="ts">

</script>
<script lang="ts" setup name="Person">
        //数据-非响应式
            let name='张三'
           let age =18
           let  tel = 13811111111
           let address="北京胡同口"

        //方法
           function showTel(){
            alert(tel)
        }
        function changeName(){
           name='zhangsan'
        }
        function changeAge(){
            age+=1
        }

          
</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>